<template>
  <div class="performance-box">
    <div id="card"  ref="printHtml">
      <div id="cardWrap" class="cardWrap">
        <div  class="cardContain" >
          <h2 style="text-align: center; margin-bottom: 10px">张家界航空工业职业技术学院</h2>
          <h3 style="text-align: center;">2023年录取信息查询</h3>
          <div   class="box-performance">
            <div class="advice-note" >
              <div class="advice-note-image">
                <img  src="../../src/assets/advice-note.jpg">
              </div>
              <div class="advice-note-text">
                <div class="user-image">
                  <img v-show="information.number!==undefined"  :src="'http://andysama.work:8481/files/'+information.number" >
                </div>
                <div class="text1">{{ information.nickname }}</div>
                <div class="text2">{{ information.courtyard }}</div>
                <div class="text3">{{ information.major }}</div>
                <div class="text4">
                  <span>{{bdrqshowData[0]}}</span>
                  <span>{{bdrqshowData[1]}}</span>
                  <span class="text4-ma-10">{{bdrqshowData[2]}}</span>
                </div>
                <div class="text5">
                  <span>{{ lqrqshowDate[0] }} </span>
                  <span>{{ lqrqshowDate[1] }}</span>
                  <span class="text5-ma-10">{{ lqrqshowDate[2] }}</span>
                </div>
              </div>
            </div>

            <div class="box-right">



              <el-card class="expressage-box">
                <div slot="header" class="clearfix">
                  <span>通知书邮寄信息</span>
                </div>
                <div class="text-box">
                  <div class="address-box">
                    <i class="el-icon-location"></i>
                    <span>{{information.address}}</span>
                  </div>
                  <div class="person">
                    <div class="sjr">收件人:<span>{{information.recipients}}</span></div>
                    <div class="phone">收件号码:<span>{{information.phone}}</span></div>
                  </div>
                  <div class="infor">
                    <div class="sjr">邮政编码:<span>{{information.specialty}}</span></div>

                    <div class="phone"  @click="linkUrl(information.expressNumber)">
                      快递单号:
                      <el-tooltip class="item" effect="dark" content="点击复制" placement="top-start">
                      <span>{{information.expressNumber}}</span>
                      </el-tooltip>
                    </div>

                  </div>
                </div>
              </el-card>
<!--              <div class="image-box">-->
<!--                <img src="../assets/详细收费表.png">-->

<!--              </div>-->
            </div>

          </div>

        </div>
      </div>
    </div>

  </div>
</template>

<script>
import {informationGetByNumber} from "@/request/utils/information";
import {bdrqDate} from "../../public/date";

export default {
  name: "performance",
  data() {
    return {
      bdrqshowData:[],
      lqrqshowDate: [],
      information:{},
    }
  },
  //计算属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    load(number,informationItem){
      console.log("考生号是",number)
      console.log("考生号信息",informationItem)

      informationGetByNumber(number).then(res=>{
        if(res.code===0){
            if(res.data!==null){
              this.information = res.data;
              this.lqrqshowDate =  this.information.data.split("-")
            }else {
            }
          }
      })

    },


    linkUrl(item){
      let url = item;//拿到想要复制的值
      let copyInput = document.createElement('input');//创建input元素
      document.body.appendChild(copyInput);//向页面底部追加输入框
      copyInput.setAttribute('value', url);//添加属性，将url赋值给input元素的value属性
      copyInput.select();//选择input元素
      document.execCommand("Copy");//执行复制命令
      this.$message.success("链接已复制！");//弹出提示信息，不同组件可能存在写法不同
      //复制之后再删除元素，否则无法成功赋值
      copyInput.remove();//删除动态创建的节点
    }

  },
  //生命周期 一 创建完成(可以访问当前this实例)
  created() {
    this.information = JSON.parse(localStorage.getItem("zjjuser"));
    console.log("数据是",this.information);

    this.bdrqshowData = bdrqDate.split("-");
    this.lqrqshowDate =  this.information.date.split("-");
    // this.load(this.$route.query.number,this.$route.params.informationItem);
  },
  //生命周期 一 挂载完成(可以访问DOM元素)
  mounted() {

  },
  //生命周期 - 创建之前
  beforeCreate() {
  },
  //生命周期 - 挂载之前
  beforeMount() {
  },
  //生命周期 - 更新之前
  beforeUpdate() {
  },
  //生命周期 - 更新之后
  updated() {
  },
  //生命周期 - 销毁之前
  beforeDestroy() {
  },
  //生命周期 - 销毁完成
  destroyed() {
  },
  //如果页面有keep-alive缓存功能，这个函数会触发
  activated() {
  },
}
</script>

<style lang="less" scoped>

.performance-box{
  width: 2550px;
  //padding-top: 50px;
  background: url("../assets/bg2.jpg") no-repeat ;
  background-size: cover;
}
span{
  font-weight: 800;
  color: black;
}
.cardContain{
  padding: 50px 0;
  margin: 0 auto;
  h2{
    font-size: 70px;
  }
  h3{
    font-size: 40px;
    margin-bottom:30px;
  }
  .pttb{

    margin: 0 auto;
  }
}
.but-box{
  margin-top: 50px;
  display: flex;
  justify-content: center;
  .b-box{
    display: flex;
    justify-content: center;

  }
}

p{
  color: black;
  font-weight: 800;
}

#card{
  font-size: 16px;
}

.box-performance{

  width: 1700px;
  margin: 0 auto;
  margin-top: 150px;
  display: flex;
  flex-direction: column;
  align-items: center;

  text-align: center;

  .advice-note{
    display: flex;
    position: relative;
    width: 900px;
    height: 700px;
    .advice-note-image{
      width: 900px;
      height: 700px;
      img{
        width: 100%;
        height: 100%;
      }
    }

    .advice-note-text{
      position: absolute;
      width: 100%;
      height: 100%;
      font-size: 30px;
      font-weight: 800;
      color: black;

      .user-image{
        width: 17%;
        position: absolute;
        left: 4%;
        top: 10%;
        img{
          width: 100%;
          height: 100%;
        }
      }

      .text1{
        position: absolute;
        right: 50%;
        top: 9%;
        letter-spacing: 6px;
      }
      .text2{
        position: absolute;
        right: 20%;
        top: 19%;
        letter-spacing: 6px;
      }
      .text3{
        position: absolute;
        right: 45%;
        top: 29%;
        letter-spacing: 6px;
      }
      .text4{
        position: absolute;
        right: 39%;
        top: 39%;
        letter-spacing: 6px;
        span{
          margin-left: 70px;
        }
        .text4-ma-10{
          margin-left: 75px;
        }
      }
      .text5{
        position: absolute;
        left: 5%;
        bottom: 10%;
        font-size: 25px;
        font-weight: 800;
        span{
          margin-left: 25px;
        }
        .text5-ma-10{
          margin-left: 40px;
        }
      }
    }
  }



  .box-right{
    margin-bottom: 50px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    .information{

      width: 800px;
      margin: 50px auto;
      display: flex;
      justify-content: space-between;
      font-size: 30px;

      span{
        color: white;
      }
    }

    .expressage-box{
      width: 600px;
      margin-top: 50px;
      .clearfix{
        font-size: 30px;
        font-weight: 800;
      }

      .text-box{
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        .address-box{
          margin: 20px 0;
          display: flex;
          font-size: 25px;
          i{
            font-size: 25px;
            display: flex;
            justify-content: center;
            align-items: center;
          }
        }
        .person{
          margin: 30px 0;
          display: flex;
          justify-content: space-between;
          text-align: left;
          font-size: 20px;
          div{
            width: 50%;
            color: black;
            font-weight: 800;

            span{
              margin-left: 10px;
            }
          }
        }

        .infor{
          margin: 30px 0;
          display: flex;
          justify-content: left;
          text-align: left;
          font-size: 20px;

          div{
            width: 50%;
            color: black;
            font-weight: 800;

            span{
              margin-left: 10px;
            }
          }

        }
      }

    }

    .image-box{
      margin-top: 50px;
    }
  }



}




</style>